<template>
  <div id="my-meeting">
    <!-- <van-nav-bar title="我的会议" left-arrow fixed :border="false" @click-left="$common.backButtonClicked(false)"></van-nav-bar> -->
    <div class="nav-container">
      <van-tabs sticky animated swipeable color="#2E79FF" @click="setSrollTop" v-model="activeTab">
        <van-tab v-for="(item, index) in tabs" :key="`${index}tab页`" :title="item.name">
            <van-pull-refresh v-model="refreshLoading" @refresh="getMeetingList(item.data, item.page, item.type, item.finished, true, false)">
              <img
                slot="loading"
                class="loading-gif-refresh"
                src="../../assets/loading.gif"
              >
              <template v-if="getDataFiled(item.data).length == 0">
                <div class="no-data-img">
                  <img src="../../assets/meeting/no_meeting.png">
                  <p>暂无相关会议</p>
                </div>
              </template>
              <van-list
                v-show="getDataFiled(item.data).length > 0"
                v-model="isLoading"
                :finished="getDataFiled(item.finished)"
                finished-text="没有更多数据了"
                @load="getMeetingList(item.data, item.page, item.type, item.finished, false, false)">
                <van-card  v-for="(itemInner, indexInner) in getDataFiled(item.data)" :index="`${indexInner}我的会议`"  @click.stop="meetingClick(itemInner, 'detailInfo')">
                  <div slot="thumb">
                    <img height="80px" width="100px" src="../../assets/meeting/myMeeting.png" fit="cover"/>
                  </div>
                  <div slot="title">
                    <p class="card-title van-ellipsis">{{ itemInner.title }}</p>
                  </div>
                  <div slot="desc">
                    <p class="card-desc"><van-icon name="location-o"></van-icon>{{ itemInner.conferenceroom }}</p>
                    <p class="card-desc"><van-icon name="clock-o"></van-icon>{{ itemInner.startdate }} - {{ itemInner.enddate.split(' ')[1] }}</p>
                  </div>
                  <div v-if="itemInner.status == 1 && itemInner.type != '3' && itemInner.type != '4'" class="card-footer" slot="footer">
                    <van-button class="padding-button" type="info" plain @click.stop="meetingClick(itemInner, 'meetDetail')">编辑</van-button>
                  </div>
                </van-card>
              </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
      
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        activeTab: 0,
        tabs: [
          {
            name: '由我创建',
            type: '3',
            data: 'myMeeting',
            page: 'myMeetingPage',
            finished: 'myMeetingFinished'
          },
          {
            name: '待开会议',
            type: '1',
            data: 'noStart',
            page: 'noStartPage',
            finished: 'noStartFinished'
          },
          {
            name: '已结束会议',
            type: '2',
            data: 'isStart',
            page: 'isStartPage',
            finished: 'isStartFinished'
          }
        ],
        myMeeting: [],
        myMeetingPage: 1,
        myMeetingFinished: false,
        noStart: [],
        noStartPage: 1,
        noStartFinished: false,
        isStart: [],
        isStartPage: 1,
        isStartFinished: false,

        refreshLoading: false,
        isLoading: false,
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '我的会议'})
      // if(this.$refs.myMeeting) {
      //   this.$refs.myMeeting[0].scrollTo(0, this.$store.state.myMeeting || 0)
      // }
      // if(this.$refs.noStart) {
      //   this.$refs.noStart[0].scrollTo(0, this.$store.state.noStart || 0)
      // }
      // if(this.$refs.isStart) {
      //   this.$refs.isStart[0].scrollTo(0, this.$store.state.isStart || 0)
      // }
      this.getMeetingList('myMeeting', 'myMeetingPage', '3', 'myMeetingFinished', true, true)
      this.getMeetingList('noStart', 'noStartPage', '1', 'noStartFinished', true, true)
      this.getMeetingList('isStart', 'isStartPage', '2', 'isStartFinished', true, true)
    },
    mounted() {
      // this.getMeetingList('myMeeting', 'myMeetingPage', '3', 'myMeetingFinished', true, true)
      // this.getMeetingList('noStart', 'noStartPage', '1', 'noStartFinished', true, true)
      // this.getMeetingList('isStart', 'isStartPage', '2', 'isStartFinished', true, true)
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      /**
       * 点击tab 记录卷去的高度 
       * @return {[type]} [description]
       */
      setSrollTop() {
        // this.$nextTick(_ => {
        //   debugger
        //   switch(this.activeTab) {
        //     case 0:
        //       this.$store.commit('changeStatus', {key: 'myMeeting', value: this.$refs.myMeeting[0].scrollTop})
        //       break;
        //     case 1:
        //       this.$store.commit('changeStatus', {key: 'noStart', value: this.$refs.noStart[0].scrollTop})
        //       break;
        //     case 2:
        //       this.$store.commit('changeStatus', {key: 'isStart', value: this.$refs.isStart[0].scrollTop})
        //       break;
        //     default:
        //       break;
        //   }
        // })
        
      },
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      /**
       * 获取我的会议 - 列表
       * @return {[type]} [description]
       */
      getMeetingList(target, page, type, finished, init, showToast) {
        let self = this
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        
        if(init) { //初始化查询
          self[page] = 1
          self[finished] = false
        }

        let config = {
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: 'Administration',
            page: self[page]++,
            type: type,
            id: this.$store.state.userId,
          },
          method: 'POST'
        }
        if(!self[finished] || init) {
          self.$axios(config).then(res => {
            self.isLoading = false
            self[target] = init ? res.data.data : self[target].concat(res.data.data)
            if(self[target].length >= res.data.count) {
              self[finished] = true
            }
            self.refreshLoading = false;
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
          })
        }
      },
      /**
       * 点击会议 根据类型进行操作
       * @param  {[type]} item [description]
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      meetingClick(item, type) {
        let times = new Date(item.startdate.split(' ')[0]).getTime()
        this.setSrollTop()
        if(type == 'detailInfo') {
          this.$router.push({name: type, query: {id: item.id, from:"default"}})
        } else {
          this.$router.push({name: type, query: {id: item.id, useable: true, start: this.$common.dateToTime(item.startdate), end: this.$common.dateToTime(item.enddate), date: times, type:'edit'}})
        }
      }
    }
  }
</script>

<style lang="less">
  .padding-button {
    height: 30px!important;
    padding: 5px 22px 5px 22px!important;
    font-size: 17px!important;
    line-height: 17px!important;
  }
  #my-meeting {
    .van-list__finished-text {
      background-color: #f5f5f5;
    }

    background: #f5f5f5;
    /*height: 
    overflow-y: auto;
     */
    -webkit-overflow-scrolling: touch;
    /*height: calc(100vh - 94px);*/
    /*overflow-y: hidden; */
    .van-pull-refresh__track {
      min-height: calc(100vh - 94px);
      background: #f5f5f5;
    }
    .van-card {
      padding: 12px 16px;
      margin-top: 12px!important;
      background: #fff;
      border-width: 75%;
      border-bottom: 1px solid #f5f5f5;
      /* &:not(:first-child) {
        margin-top: 12px!important;
      }*/
      &:last-child {
        border-bottom: none;
      }
      .van-card__thumb {
        width: 100px;
        height: 80px;
        & .van-image img {
          border-radius: 8px;
        }
      }
      .van-card__content {
        min-height: auto;
      }
    }
    .card-title {
      font-size: 17px;
      margin: 0;
    }
    .card-desc {
      display: flex;
      align-items: center;
      margin: 10px 0 0 0;
      font-size: 14px;
      color: #666;
      .van-icon {
        margin-right: 5px;
      }
    }
    .card-footer {
      margin-top: 12px;
    }
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30% 0 30% 0;
    background-color: #f5f5f5;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>